<!-- 优惠券中心  -->
<template>
	<s-layout title="有奖竞猜" :bgStyle="{ color: '#f2f2f2' }">
		<s-empty v-if="state.total === 0" icon="/static/coupon-empty.png" text="暂无数据"></s-empty>
		<view class="team-list">
			<view class="list-box" v-for="(item, index) in state.gameData" :key="index">
				<view class="img-box">
					<image class="img-img" :src="`${item.img}?${index}`" mode="widthFix"></image>
				</view>
				<view class="content-box">
					<view class="content-box-text">
						{{ item.text }}
					</view>
					<view class="content-box-time">
						{{ item.time }}
					</view>
					<view class="container">
						<uni-collapse>
							<uni-collapse-item title="详情信息">
								<view class="collapse-box2" v-for="(item2, index2) in item.collapsibleItems" :key="index2">{{ item2.content }}</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
		contentdown: '上拉加载更多',
	}" tap="loadmore" />
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {
	onLoad,
	onReachBottom
} from '@dcloudio/uni-app';
import {
	computed,
	reactive
} from 'vue';
import _ from 'lodash';
const state = reactive({
	loadStatus: '',
	total: 3,
	gameData: [{
		img: 'https://picsum.photos/50/50',
		text: "什么什么比赛",
		time: "2024.03.07-2024.03.08",
		collapsibleItems: [
			{ content: '这是折叠面板的内容1', isCollapsed: false },
			{ content: '这是折叠面板的内容2', isCollapsed: false },
			{ content: '这是折叠面板的内容3', isCollapsed: false },
		]
	}, {
		img: 'https://picsum.photos/50/50',
		text: "什么什么比赛2",
		time: "2024.03.07-2024.03.08",
		collapsibleItems: [
			{ content: '这是折叠面板的内容1', isCollapsed: false },
			{ content: '这是折叠面板的内容2', isCollapsed: false },
			{ content: '这是折叠面板的内容3', isCollapsed: false },
		]
	}]
});

function toggleCollapse(index) {
	console.log(index);
}

// async function getData(page = 1, list_rows = 5) {
// 	state.loadStatus = 'loading';
// 	const res = await sheep.$api.coupon.list({
// 		list_rows,
// 		page
// 	});
// 	if (res.code === 1) {
// 		let couponlist = _.concat(state.pagination.data, res.data.data);
// 		state.pagination = {
// 			...res.data,
// 			data: couponlist,
// 		};
// 		if (state.pagination.current_page < state.pagination.last_page) {
// 			state.loadStatus = 'more';
// 		} else {
// 			state.loadStatus = 'noMore';
// 		}
// 	}
// }

// async function getCoupon(page = 1, list_rows = 5) {
// 	state.loadStatus = 'loading';
// 	let res = await sheep.$api.coupon.userCoupon({
// 		type: state.type,
// 		list_rows,
// 		page,
// 	});
// 	if (res.code === 1) {
// 		let couponlist = _.concat(state.pagination.data, res.data.data);
// 		state.pagination = {
// 			...res.data,
// 			data: couponlist,
// 		};
// 		if (state.pagination.current_page < state.pagination.last_page) {
// 			state.loadStatus = 'more';
// 		} else {
// 			state.loadStatus = 'noMore';
// 		}
// 	}
// }

// // 加载更多
// function loadmore() {
// 	if (state.loadStatus !== 'noMore') {
// 		if (state.currentTab == 0) {
// 			getData(state.pagination.current_page + 1);
// 		} else {
// 			getCoupon(state.pagination.current_page + 1);
// 		}
// 	}
// }

// onReachBottom(() => {
// 	loadmore();
// });
</script>
<style lang="scss" scoped>
.btn-zhuti-box {
	display: flex;
}

.btn-zhuti-box>button {
	margin-right: 10rpx;
}

.btn-zhuti-box>button:last-child {
	margin-right: 0;
}

.content-box {
	padding: 15rpx;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-left: 25rpx;
}

.team-list {
	padding: 25rpx 15rpx;
}

.list-box {
	display: flex;
	margin-bottom: 26rpx;
	background-color: #fff;
	padding: 10rpx;
	border-radius: 10rpx;
	flex-shrink: 0;
	border-top: 6rpx solid #2979ff;
}

.img-box {
	width: 130rpx;
	height: 130rpx;
	margin-top: 10rpx;
}

.img-img {
	width: 100%;
	border-radius: 10rpx;
}

.content-box-text {
	margin-bottom: 30rpx;
}

.content-box-time {
	color: #c1c1c1;
	font-size: 24rpx;
	padding-bottom: 15rpx;
	border-bottom: 1rpx dashed #c1c1c1;
}
::v-deep.uni-collapse-item__title.uni-collapse-item-border {
	border-bottom: none;
}
::v-deep.uni-collapse-item__wrap-content.uni-collapse-item--border {
	border-bottom: none;
}
::v-deep.uni-collapse-item__title-box {
	height: auto;
	line-height: 230%;
}
.collapse-box2 {
	line-height: 180%;
}
</style>